<template>
  <el-form ref="formRef" :model="state.form" :show-message="false" :rules="rules" label-width="90px" v-loading="state.loading">
    <el-row :gutter="20">
      <el-col :span="12" class="mb20">
        <el-form-item label="渠道名称" prop="name">
          <el-input v-model="state.form.name"  />
        </el-form-item>
      </el-col>
      <el-col :span="12" class="mb20">
        <el-form-item label="渠道编码" prop="code">
          <el-input v-model="state.form.code" :disabled="! $empty(state.form.id)" />
        </el-form-item>
      </el-col>

      <el-col :span="12" class="mb20">
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker v-model="state.form.startTime" type="date" value-format="YYYY-MM-DD HH:mm:ss" />
        </el-form-item>
      </el-col>
      <el-col :span="12" class="mb20">
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker v-model="state.form.endTime" type="date"  value-format="YYYY-MM-DD HH:mm:ss" />
        </el-form-item>
      </el-col>
      <el-col :span="12" class="mb20">
        <el-form-item :span="12" label="域名" prop="tenantDomain">
          <el-input v-model="state.form.tenantDomain" :disabled="! $empty(state.form.id)" />
        </el-form-item>
      </el-col>
      <el-col :span="12" class="mb20">
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="state.form.status">
            <el-radio :label="item.value" v-for="(item, index) in state.statusType" border :key="index">{{ item.label }} </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup>
import useStore from '@/stores/modules/platform/tenant';
const store = useStore();
// 提交表单数据
const state = reactive({
  loading: false,
  statusType: [{label: "正常", value: "0"},{label:"冻结", value: "9"}],
  form:{
    id: '',
    name: '',
    code: '',
    tenantDomain: '',
    startTime: '',
    endTime: '',
    status: "0",
    delFlag: '',
    createBy: '',
    updateBy: '',
    createTime: '',
    updateTime: '',
  }
});
// 定义校验规则
const rules = ref({
  name: [
    { required: true, message: '名称不能为空', trigger: 'blur' },
  ],
  code: [
    { required: true, message: '编码不能为空', trigger: 'blur' },
  ],
  // 域名
  tenantDomain: [
    { required: true, message: '域名不能为空', trigger: 'blur' },
  ],
  startTime: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
  endTime: [{ required: true, message: '结束时间不能为空', trigger: 'blur' }],
});

const formRef = ref(null);
/**
 * 表单验证
 * @param callback
 * @returns {Promise<void>}
 */
const doValidate = async (callback) => {
  await formRef.value.validate((valid, fields) => {
    if (! valid) {
      let errMsg = Helper.getFirstMessage(fields);
      if (errMsg) {
        Msg.error(errMsg)
      }
      callback(false)
      return
    }

    callback(state.form)
  })
}

/**
 * 保存
 * @returns {Promise<void>}
 */
const submit = async () => {
  await doValidate(async (form) => {
    if (form == false) {
      return
    }

    let result = null
    result = form.id ? await store.modify(form) : await store.save(form)
    if (result) {
      Dialog.close()
    }
  })
}


/**
 * 获取数据
 * @param data
 */
const render = (data, disabled) => {
  state.disabled = disabled;
  if(Helper.emptyJson(data)) {
    return
  }

  if(! Helper.empty(data.startTime)) {
    data.startTime = data.startTime + " 00:00:00"
  }

  if(! Helper.empty(data.endTime)) {
    data.endTime = data.endTime + " 00:00:00"
  }

  state.form = data;
}

defineExpose({ render, submit })

</script>

<style scoped>

</style>
